<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bookmark Manager</title>
    <link rel="stylesheet" href="css/options.css">
    <link rel="stylesheet" href="css/cilijdb.css">
</head>
<body>

<div class="container">
    <div class="panel_top sh-broder">
        <span>书签管理</span>
		<button id="randm_btn">随机20</button>
		<button id="randm_play_btn">随机播放</button>
		<input type="text" list="historyList" name="" id="code-search" style="margin-left: 20px;">
		<button id="clear-search-btn" >X</button>
		<button id="del-search-btn" >del</button>
		<datalist id="historyList"></datalist>
        <input type="number" id="col-num" value="2" min="1" max="3" style="margin-left: 20px; width: 60px;">
		<span id='av-flag' style="font-size: 18px; color: orange ; margin-left: 10px;">【+++】</span>
		<span id='av-title' style="font-size: 18px; color: blue; margin-left: 10px;">无标题</span>
    </div>
    <div class="panel_main">
        <div class="sidebar">
            <div class="folder-tree sh-broder"></div>
            <div class="file-list sh-broder"></div>
        </div>
        <div class="preview sh-broder">
            <div class="tabs">
                <div class="tab-button active" data-index="1" data-tab="tab_a_plan">预览-综合</div>
                <div class="tab-button" data-index="2" data-tab="tab_a_plan">预览-JavDB</div>
                <div class="tab-button" data-index="3" data-tab="tab_a_plan">预览-自制</div>
                <div class="tab-button" data-index="4" data-tab="tab_b_plan">预览-长图</div>
            </div>
            <div class="tab-content" id="tab_a_plan">
                <div class="info-panel">
                    <div class="video-img-box">
                        <video class="av-preview-video" id="pre-video" controls="" loop="" ></video>
                        <img class="av-cover" />
                        <button class="cover-btn">播放</button>
                    </div>

                    <div class="movie-info-panel">
                        <div class="panel-block lable-code">
                            <strong>代码：</strong>&nbsp;
                            <span class="value">XXX-123</span>
                        </div>

                        <div class="panel-block lable-ri">
                            <strong>日标：</strong>&nbsp;
                            <span class="value">XXX-123</span>&nbsp;
                            <a class="copy-ri" href='javascript:void(0);'>
                                复制
                            </a>
                        </div>

                        <div class="panel-block label-zh">
                            <strong>中标：</strong>&nbsp;
                            <span class="value">XXX-123</span>&nbsp;
                            <a class="copy-zh" href='javascript:void(0);'>
                                复制
                            </a>
                        </div>

                        <div class="panel-block lable-shic">
                            <strong>时长：</strong>&nbsp;
                            <span class="value">xx 分钟</span>
                        </div>

                        <div class="panel-block lable-yany">
                            <strong>演員：</strong>&nbsp;
                            <span class="value">
                            </span>
                        </div>
						
						<div class="panel-block lable-toux">
                            <strong>头像：</strong>&nbsp;
                            <div class="value">
								<img src="https://www.busfan.shop/pics/actress/8r9_a.jpg" />
								<img src="https://www.busfan.shop/pics/actress/2wr_a.jpg" />
								<img src="https://www.busfan.shop/pics/actress/2hp_a.jpg" />
                            </div>
                        </div>

                        <div class="panel-block lable-jies">
                            <strong>介绍：</strong>&nbsp;
                            <p class="value">xx 分钟</p>
                        </div>

                        <div class="panel-block lable-buttons">
                            <button id="add_bookmark">添加收藏</button>
                        </div>
                    </div>
                </div>

				<div style="width: 100%">
					<div id="cili_panel" class="preview-cili-div hide"></div>
					<div class="preview-img-div" id="one-img"></div>
				</div>
            </div>
            <div class="tab-content" id="tab_b_plan" style="display: none;">
                <img id="pre-img"/>
                <div class="preview-img-div" id="long-img"></div>
            </div>


        </div>
    </div>

</div>

<script src="parser_av_web.js"></script>
<script src="options.js"></script>
</body>
</html>